<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>商户添加页面</title>
  <link rel="stylesheet" href="../../../yl/index.css" />
  <!-- 布局样式 -->
  <link rel="stylesheet" href="../../../style/wangeditor.css">
  <link rel="stylesheet" href="../../../yl/style.css">
  <link rel="stylesheet" href="../../../yl/mobile.css" />
  <link rel="stylesheet" href="../../../yl/easyui.css" />
  <link rel="stylesheet" href="../../../yl/icon.css" />
  <style>
    .el-tabs .el-descriptions__label {
      width: 120px;
    }
  </style>
</head>

<body>
  <!-- <div id="app"> -->
  <div class="easyui-navpanel" id="app" v-cloak>
    <header>
      <div class="m-toolbar">
        <div class="m-title">{{action=='Add'?'添加信息':action=='Modify'?'修改信息':''}}</div>
      </div>
    </header>
    <div class="easyui-navpanel panel-body panel-body-nobottom panel-body-noborder" style="height: 3000px"
      id="MainTable" ref="MainTable"
      :data-options="JSON.stringify({ 'TableName': 'merchant', 'form': 'dataForm','primary_key':'Merchant_SerialNumber' })">
      <div class="yl-main">
        <div class="table_titel">
          <div class="titel">商户信息</div>
        </div>
        <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
          <el-descriptions :column="1" size="large" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">营业执照</div>
              </template>
              <yl-upload v-model="dataForm.Logo_URL" @success="success"></yl-upload>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">商户名称</div>
              </template>
              <el-form-item prop="Merchant_Name" :rules="[{ required: true, message: '请输入商户名称', trigger: 'blur' }]">
                <el-input v-model="dataForm.Merchant_Name" class="borderless-input" placeholder="请输入商户名称" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">法人代表</div>
              </template>
              <el-form-item prop="Legal_Person" :rules="[{ required: true, message: '请输入法人代表', trigger: 'blur' }]">
                <el-input v-model="dataForm.Legal_Person" class="borderless-input" placeholder="请输入法人代表" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">责任人</div>
              </template>
              <el-form-item prop="ID_Number" :rules="[{ required: true, message: '请选择责任人', trigger: 'change' }]">
                <!-- <el-input v-model="dataForm.ID_Number" class="borderless-input" placeholder="请输入身份证编号" /> -->
                <yl-select v-model="dataForm.ID_Number" clearable filterable placeholder="请选择责任人"
                  :options="personal_information" :props="{value:'ID_Card_Number',label:'Personal_Name'}">
                  <el-table-column prop="ID_Card_Number" width="180" show-overflow-tooltip
                    label="身份证号"></el-table-column>
                  <el-table-column prop="Personal_Name" show-overflow-tooltip label="姓名"></el-table-column>
                  <el-table-column prop="Birthday" show-overflow-tooltip label="出生日期"></el-table-column>
                  <el-table-column prop="Gender" label="性别"></el-table-column>
                  <el-table-column prop="Nation" label="民族"></el-table-column>
                  <el-table-column prop="Registered_Residence" show-overflow-tooltip label="籍贯"></el-table-column>
                  <el-table-column prop="Contact_Phone" label="联系方式"></el-table-column>
                </yl-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">责任人联系电话</div>
              </template>
              <el-form-item prop="Contact_Phone" :rules="[{ required: true, validator:PH_Validity, trigger: 'blur' }]">
                <el-input v-model="dataForm.Contact_Phone" class="borderless-input" placeholder="请输入责任人联系电话" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">营业执照编号</div>
              </template>
              <el-form-item prop="Business_License"
                :rules="[{ required: true, validator:ID_Business, trigger: 'blur' }]">
                <el-input v-model="dataForm.Business_License" class="borderless-input" placeholder="请输入营业执照编号" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">省/市/区</div>
              </template>
              <el-form-item prop="County_Nubmer" :rules="[{ required: true, message: '请输入省/市/区', trigger: 'change' }]">
                <el-cascader @change="changeCity" filterable style="width: 100%;" v-model="dataForm.County_Nubmer"
                  :options="city" class="borderless-input"
                  :props="{ emitPath: false, value: 'value',  label: 'label', children: 'children'}"
                  clearable></el-cascader>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">街道(乡镇)/小区(村庄)</div>
              </template>
              <el-form-item prop="Village_Number"
                :rules="[{ required: true, message: '请选择街道(乡镇)/小区(村庄)', trigger: 'change' }]">
                <el-cascader @change="changeCity1" filterable style="width: 100%;" v-model="dataForm.Village_Number"
                  :options="city1" class="borderless-input"
                  :props="{ emitPath: false, value: 'ProvinceNumber',  label: 'Province', children: 'children'}"
                  clearable></el-cascader>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">商铺地址</div>
              </template>
              <el-form-item prop="Merchant_Address" :rules="[{ required: true, message: '请输入商铺地址', trigger: 'blur' }]">
                <el-input @input="inputMerchant_Address" v-model="dataForm.Merchant_Address" class="borderless-input"
                  placeholder="请输入商铺地址" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">商户所在位置坐标</div>
              </template>
              <el-form-item prop="Merchant_Coords" :rules="[{ required: true, validator:IS_Coords, trigger: 'blur' }]">
                <el-input type="textarea" disabled :autosize="{ minRows: 2}" v-model="dataForm.Merchant_Coords"
                  class="borderless-input" placeholder="请输入商户所在位置坐标" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">商铺描述</div>
              </template>
              <el-form-item prop="Merchant_Description">
                <el-input type="textarea" :autosize="{ minRows: 2}" v-model="dataForm.Merchant_Description"
                  class="borderless-input" placeholder="请输入商铺描述" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">注册日期</div>
              </template>
              <el-form-item prop="Register_Date" :rules="[{ required: true, message: '请选择注册日期', trigger: 'change' }]">
                <el-date-picker v-model="dataForm.Register_Date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  class="borderless-input" type="date" placeholder="请选择注册日期" size="large"></el-date-picker>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">对应的蓝牌</div>
              </template>
              <el-form-item prop="Blue_Plate_SerialNumber"
                :rules="[{ required: true, message: '请选择店铺对应的蓝牌', trigger: 'change' }]">
                <el-select @change="changeBluePlate2" clearable filterable v-model="dataForm.Blue_Plate_SerialNumber"
                  placeholder="请选择店铺对应的蓝牌">
                  <el-option v-for="item in blue_plate" :key="item.Blue_Plate_SerialNumber"
                    :label="item.Blue_Plate_Name" :value="item.Blue_Plate_SerialNumber"></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
        <!-- 房型经营范围 -->
        <div id="ChildTable">
          <div class="table_titel">
            <div class="titel">经营范围</div>
            <div class="operation">
              <el-button type="primary" size="small" @click="handleAdd('childDataForm')">新增</el-button>
              <el-button type="danger" size="small" @click="handleRemove('childDataForm')">删除</el-button>
            </div>
          </div>
          <el-form :model="{childDataForm:childDataForm.filter(item => item.Row_Status != '1')}" ref="childDataForm"
            :inline-message="true" style="width: 100%">
            <el-descriptions class="ChildTable" :column="2" size="large" border
              :data-options="JSON.stringify({ 'TableName': 'merchant_business_scope', 'form': 'childDataForm', 'ParentTableName': 'merchant'})"
              v-for="(item,index) in childDataForm.filter(item => item.Row_Status != '1')" :key="index">
              <el-descriptions-item :span="2">
                <template #label>
                  <div class="cell-item">商铺类别</div>
                </template>
                <el-form-item :prop="'childDataForm.'+ index + '.Merchant_Category_SerialNumber'"
                  :rules="[{ required: true, message: '请选择商铺类别', trigger: 'change' }]">
                  <el-cascader @change="changeBluePlate($event,item)" v-model="item.Merchant_Category_SerialNumber"
                    filterable clearable
                    :props="{value:'Merchant_Category_SerialNumber',label:'Merchant_Category',children:'children',emitPath:false}"
                    placeholder="请选择商铺类别" class="borderless-input" :options="mcategory2(item)"
                    style="width: 100%"></el-cascader>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">许可证书</div>
                </template>
                <el-form-item :prop="'childDataForm.'+ index + '.Certificate_URL'"
                  :rules="[{ required: true, message: '请上传许可证书', trigger: 'change' }]">
                  <yl-upload v-model="item.Certificate_URL"></yl-upload>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">许可证书编号</div>
                </template>
                <el-form-item :prop="'childDataForm.'+ index + '.Certificate_SerialNumber'"
                  :rules="[{ required: true, message: '请输入许可证书编号', trigger: 'blur' }]">
                  <el-input v-model="item.Certificate_SerialNumber" class="borderless-input" placeholder="请输入许可证书编号" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">店铺资质</div>
                </template>
                <div class="table_titel">
                  <div class="titel"></div>
                  <div class="operation">
                    <el-button type="primary" size="small" @click="handleAdd1(item)">新增</el-button>
                    <el-button type="danger" size="small" @click="handleRemove1(item)">删除</el-button>
                  </div>
                </div>
                <el-descriptions v-if="showComponent" :column="2" size="large" border
                  v-for="(item,id) in item.Children.merchant_qualification" :key="id">
                  <template v-if="item.Row_Status!='1'">
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">资质类别</div>
                      </template>
                      <el-form-item :rules="[{ required: true, message: '请选择资质类别', trigger: 'change' }]"
                        :prop="'childDataForm.'+ index + '.Children.merchant_qualification.' + id + '.Qualification_Type_SerialNumber'">
                        <el-select clearable v-model.trim="item.Qualification_Type_SerialNumber" placeholder="请选择资质类别"
                          filterable style="width: 100%">
                          <el-option v-for="(item,index) in qualification" :key="index" :label="item.Qualification_Name"
                            :value="item.Merchant_Qualification_Type_SerialNumber"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">证书编号</div>
                      </template>
                      <el-form-item :rules="[{ required: true, message: '请输入证书编号', trigger: 'blur' }]"
                        :prop="'childDataForm.'+ index + '.Children.merchant_qualification.' + id + '.Cert_SerialNumber'">
                        <el-input v-model="item.Cert_SerialNumber" class="borderless-input" placeholder="请输入证书编号" />
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">发证日期</div>
                      </template>
                      <el-form-item :rules="[{ required: true, message: '请选择发证日期', trigger: 'change' }]"
                        :prop="'childDataForm.'+ index + '.Children.merchant_qualification.' + id + '.Issue_Date'">
                        <el-date-picker v-model="item.Issue_Date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                          style="width: 100%;" class="borderless-input" type="date" placeholder="请选择发证日期"
                          size="large"></el-date-picker>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">到期日期</div>
                      </template>
                      <el-form-item :rules="[{ required: true, message: '请选择到期日期', trigger: 'change' }]"
                        :prop="'childDataForm.'+ index + '.Children.merchant_qualification.' + id + '.Expire_Date'">
                        <el-date-picker v-model="item.Expire_Date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                          style="width: 100%;" class="borderless-input" type="date" placeholder="请选择到期日期"
                          size="large"></el-date-picker>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">发证机关</div>
                      </template>
                      <el-form-item :rules="[{ required: true, message: '请输入发证机关', trigger: 'blur' }]"
                        :prop="'childDataForm.'+ index + '.Children.merchant_qualification.' + id + '.Cert_Authority'">
                        <el-input v-model="item.Cert_Authority" class="borderless-input" placeholder="请输入发证机关" />
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">证书图片</div>
                      </template>
                      <el-form-item
                        :prop="'childDataForm.'+ index + '.Children.merchant_qualification.' + id + '.Cert_Image_URL'">
                        <yl-upload v-model="item.Cert_Image_URL"></yl-upload>
                      </el-form-item>
                    </el-descriptions-item>
                  </template>
                </el-descriptions>
              </el-descriptions-item>
            </el-descriptions>
          </el-form>
          <!-- 房型 -->
          <template v-if="Object.keys(select_blue_plate).length > 0">
            <el-form :model="{select_blue_plate}" ref="form_Room_type" :inline-message="true" style="width: 100%">
              <el-tabs type="border-card" style="margin-top: 20px;">
                <el-tab-pane v-for="(obj,key) in select_blue_plate" :key="key"
                  :label="mcategory.filter(i=>i.Merchant_Category_SerialNumber == key )[0].Merchant_Category">
                  <div class="table_titel">
                    <div class="titel">店名</div>
                  </div>
                  <el-descriptions :column="3" size="large" border>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">门店名称</div>
                      </template>
                      <el-form-item :rules="[{ required: true, message: '请输入门店名称', trigger: 'change' }]"
                        :prop="'select_blue_plate.'+ key + '.Merchant_Alias'">
                        <el-input v-model.trim="obj.Merchant_Alias" class="borderless-input" placeholder="请输入门店名称" />
                      </el-form-item>
                    </el-descriptions-item>
                    
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">联系方式</div>
                      </template>
                      <el-form-item :rules="[{ required: true, message: '请输入门店名称', trigger: 'change' }]"
                        :prop="'select_blue_plate.'+ key + '.Contact_Phone'">
                        <el-input v-model.trim="obj.Contact_Phone" class="borderless-input" placeholder="请输入联系方式" />
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">责任人</div>
                      </template>
                      <el-form-item :prop="'select_blue_plate.'+ key + '.ID_Number'"
                        :rules="[{ required: true, message: '请选择责任人', trigger: 'change' }]">
                        <yl-select v-model="obj.ID_Number" clearable filterable placeholder="请选择责任人"
                          :options="personal_information" :props="{value:'ID_Card_Number',label:'Personal_Name'}">
                          <el-table-column prop="ID_Card_Number" width="180" show-overflow-tooltip
                            label="身份证号"></el-table-column>
                          <el-table-column prop="Personal_Name" show-overflow-tooltip label="姓名"></el-table-column>
                          <el-table-column prop="Birthday" show-overflow-tooltip label="出生日期"></el-table-column>
                          <el-table-column prop="Gender" label="性别"></el-table-column>
                          <el-table-column prop="Nation" label="民族"></el-table-column>
                          <el-table-column prop="Registered_Residence" show-overflow-tooltip
                            label="籍贯"></el-table-column>
                          <el-table-column prop="Contact_Phone" label="联系方式"></el-table-column>
                        </yl-select>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">开店时间</div>
                      </template>
                      <el-form-item :rules="[{ required: true, message: '请选择开店时间', trigger: 'change' }]"
                        :prop="'select_blue_plate.'+ key + '.Open_Hours'">
                        <el-time-picker format="HH:mm:ss" value-format="HH:mm:ss" v-model="obj.Open_Hours"
                          class="borderless-input" :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                          placeholder="请选择开店时间"></el-time-picker>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">关店时间</div>
                      </template>
                      <el-form-item :rules="[{ required: true, message: '请选择关店时间', trigger: 'change' }]"
                        :prop="'select_blue_plate.'+ key + '.Close_Hours'">
                        <el-time-picker format="HH:mm:ss" value-format="HH:mm:ss" v-model="obj.Close_Hours"
                          class="borderless-input" :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                          placeholder="请选择关店时间"></el-time-picker>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                      <template #label>
                        <div class="cell-item">门店标签</div>
                      </template>
                      <el-form-item :prop="'select_blue_plate.'+ key + '.Merchant_Alias_Type_SerialNumber'">
                        <el-select multiple clearable v-model.trim="obj.Merchant_Alias_Type_SerialNumber"
                          placeholder="请选择门店标签" filterable style="width: 100%">
                          <el-option v-for="(item,index) in merchant_alias_type" :key="index"
                            :label="item.Merchant_Alias_Type"
                            :value="item.Merchant_Alias_Type_SerialNumber"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">门店详情</div>
                      </template>
                      <el-form-item :rules="[{ required: true, message: '请输入门店详情', trigger: 'blur' }]"
                        :prop="'select_blue_plate.'+ key + '.Merchant_Main'">
                        <yl-text-editor v-model="obj.Merchant_Main" placeholder="请输入门店详情"></yl-text-editor>
                      </el-form-item>
                    </el-descriptions-item>
                  </el-descriptions>
                  <div class="table_titel">
                    <div class="titel">商铺图片</div>
                    <div class="operation">
                      <!-- <el-button :type="drag?'danger':'success'" size="small"
                        @click="handledrag()">{{drag?'取消':'排序'}}</el-button> -->
                      <el-button type="primary" size="small" @click="handleAdd2(obj)">新增</el-button>
                      <el-button type="danger" size="small" @click="handleRemove2(obj)">删除</el-button>
                    </div>
                  </div>
                  <el-descriptions :column="3" size="large" border
                    v-for="(item,index) in obj.Children.merchant_alias_image" :key="index">
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">商铺图片</div>
                      </template>
                      <el-form-item :prop="'select_blue_plate.'+ key + '.Children.merchant_alias_image.' + index + '.Image_URL'"
                        :rules="[{ required: true, message: '上传商铺图片', trigger: 'change' }]">
                        <yl-upload v-model="item.Image_URL"></yl-upload>
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">图片类型</div>
                      </template>
                      <el-form-item :prop="'select_blue_plate.'+ key + '.Children.merchant_alias_image.' + index + '.Image_Type'"
                        :rules="[{ required: true, message: '请选择图片类型', trigger: 'change' }]">
                        <el-select clearable v-model.trim="item.Image_Type" placeholder="请选择图片类型" filterable
                          style="width: 100%">
                          <el-option :label="item.Image_Category" :value="item.Image_Category_SerialNumber"
                            v-for="(item,index) in image_category" :key="index"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-tab-pane>
              </el-tabs>
            </el-form>
          </template>
          <!-- <template v-if="room_type.length > 0">
            <el-form :model="{select_blue_plate}" ref="form_Room_type" :inline-message="true" style="width: 100%">
              <el-tabs type="border-card" style="margin-top: 20px;">
                <el-tab-pane v-for="(obj,key) in room_type" :key="key"
                  :label="mcategory.filter(i=>i.Merchant_Category_SerialNumber == obj.Merchant_Category_SerialNumber )[0].Merchant_Category">
                  <div class="table_titel">
                    <div class="titel">店名</div>
                  </div>
                  <el-descriptions :column="2" size="large" border>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">门店名称</div>
                      </template>
                      <el-form-item :rules="[{ required: true, message: '请输入门店名称', trigger: 'change' }]"
                        :prop="'select_blue_plate.'+ obj.Merchant_Category_SerialNumber + '.Merchant_Alias'">
                        <el-input v-model.trim="select_blue_plate[obj.Merchant_Category_SerialNumber].Merchant_Alias" class="borderless-input"
                        placeholder="请输入门店名称" />
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">联系方式</div>
                      </template>
                      <el-form-item :rules="[{ required: true, message: '请输入门店名称', trigger: 'change' }]"
                        :prop="'select_blue_plate.'+ obj.Merchant_Category_SerialNumber + '.Contact_Phone'">
                        <el-input v-model.trim="select_blue_plate[obj.Merchant_Category_SerialNumber].Contact_Phone" class="borderless-input"
                        placeholder="请输入联系方式" />
                      </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">营业时间</div>
                      </template>
                      <el-form-item :rules="[{ required: true, message: '请输入营业时间', trigger: 'change' }]"
                        :prop="'select_blue_plate.'+ obj.Merchant_Category_SerialNumber + '.Open_Hours'">
                        <el-input type="textarea" :autosize="{ minRows: 6}" v-model.trim="select_blue_plate[obj.Merchant_Category_SerialNumber].Open_Hours" class="borderless-input"
                        placeholder="请输入营业时间" />
                      </el-form-item>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-tab-pane>
              </el-tabs>
            </el-form>
          </template> -->
          <!-- 商铺图片 -->
          <!-- <div class="table_titel">
            <div class="titel">商户图片</div>
            <div class="operation">
              <el-button :type="drag?'danger':'success'" size="small"
                @click="handledrag()">{{drag?'取消':'排序'}}</el-button>
              <el-button type="primary" size="small" @click="handleAdd('childDataForm1')">新增</el-button>
              <el-button type="danger" size="small" @click="handleRemove('childDataForm1')">删除</el-button>
            </div>
          </div>
          <el-form id="childDataForm1" :model="{childDataForm1:childDataForm1.filter(item => item.Row_Status != '1')}"
            ref="childDataForm1" :inline-message="true" style="width: 100%">
            <el-descriptions :column="3" size="large" border class="ChildTable"
              :data-options="JSON.stringify({ 'TableName': 'merchant_image', 'form': 'childDataForm1', 'ParentTableName': 'merchant'})"
              v-for="(item,index) in childDataForm1.filter(item => item.Row_Status != '1')" :key="index">
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">商户图片</div>
                </template>
                <el-form-item :prop="'childDataForm1.' + index + '.Image_URL'"
                  :rules="[{ required: true, message: '上传商铺图片', trigger: 'change' }]">
                  <yl-upload v-model="item.Image_URL"></yl-upload>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">图片类型</div>
                </template>
                <el-form-item :prop="'childDataForm1.' + index + '.Image_Type'"
                  :rules="[{ required: true, message: '请选择图片类型', trigger: 'change' }]">
                  <el-select clearable v-model.trim="item.Image_Type" placeholder="请选择图片类型" filterable
                    style="width: 100%">
                    <el-option :label="item.Image_Type" :value="item.Image_Type_SerialNumber"
                      v-for="(item,index) in image_type" :key="index"></el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-form> -->
        </div>
      </div>
    </div>
    <footer class="botton-ann">
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" plain @click="handleSubmit" :loading="loading">提交</el-button>
    </footer>
  </div>
</body>
<script src="../../../utils/utils.js"></script>
<script src="../../../utils/wangeditor.js"></script>
<script src="../../../utils/ID_Validity.js"></script>
<script src="../../../utils/Sortable.min.js"></script>
<script src="../../../utils/compressor.js"></script>
<script src="../../../utils/mixins.js"></script>
<script src="../../../config/config.js"></script>
<script src="../../../yl/vue.js"></script>
<script src="../../../yl/index.js"></script>
<script src="../../../yl/zh-cn.mjs"></script>
<script src="../../../yl/index.iife.min.js"></script>
<script src="../../../yl/jquery.min.js"></script>
<script src="../../../utils/jquery.cookie.js"></script>
<script src="../../../yl/jquery.easyui.min.js"></script>
<script src="../../../yl/jquery.easyui.mobile.js"></script>
<script src="../../../yl/moment.min.js"></script>
<script src="../../../api/request.js"></script>
<script src="./js/api.js"></script>
<script src="./js/getscript.js"></script>
<script src="./js/add.js"></script>
<script type="text/javascript">
  var map,
    zoom = 12;
  marker = null;
  function onLoad() {
    // 获取DOM元素和初始值
    const lcenterElement = document.getElementById("lcenter");
    let initialValue = lcenterElement.value;

    // 初始化地图
    map = new TMap("mapDiv");
    let marker; // 声明标注变量

    // 处理初始坐标
    if (initialValue) {
      try {
        const values = JSON.parse(initialValue);
        const lng = values[0];
        const lat = values[1];

        map.centerAndZoom(new TLngLat(lng, lat), zoom);
        marker = new TMarker(new TLngLat(lng, lat));
        map.addOverLay(marker);
      } catch (error) {
        console.error("初始坐标解析失败:", error);
        map.centerAndZoom(new TLngLat(122.545418, 52.978303), zoom); // 默认北京坐标
      }
    } else {
      map.centerAndZoom(new TLngLat(122.545418, 52.978303), zoom); // 默认北京坐标
    }
    // 添加输入事件监听（核心逻辑）
    lcenterElement.addEventListener("input", function () {
      const newValue = this.value;
      console.log("坐标值更新:", newValue);
      // 防止空值导致错误
      if (!newValue) return;
      try {
        const values = JSON.parse(newValue);
        const lng = values[0];
        const lat = values[1];

        // 更新地图和标注
        map.centerAndZoom(new TLngLat(lng, lat), zoom);

        // 优化标注更新：先移除再添加，避免多个标注
        if (marker) map.removeOverLay(marker);
        marker = new TMarker(new TLngLat(lng, lat));
        map.addOverLay(marker);
      } catch (error) {
        console.error("坐标解析失败:", error);
        // 可以添加错误提示或自动填充默认值
      }
    });
  }
  // 百度坐标系(BD-09)转WGS-84
  function bd09ToWGS84(bd_lon, bd_lat) {
    var gcj = bd09ToGcj02(bd_lon, bd_lat);
    return gcj02ToWGS84(gcj.lng, gcj.lat);
  }
  // 百度坐标系(BD-09)转火星坐标系(GCJ-02)
  function bd09ToGcj02(bd_lon, bd_lat) {
    var x = bd_lon - 0.0065,
      y = bd_lat - 0.006;
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * Math.PI);
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * Math.PI);
    var gcj_lon = z * Math.cos(theta);
    var gcj_lat = z * Math.sin(theta);
    return { lng: gcj_lon, lat: gcj_lat };
  }
  // BD-09(百度坐标系)转GCJ-02(腾讯、高德坐标系)
  function bd09ToGCJ02(bdLng, bdLat) {
    const x = bdLng - 0.0065;
    const y = bdLat - 0.006;
    const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * Math.PI * 3000.0 / 180.0);
    const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * Math.PI * 3000.0 / 180.0);
    const ggLng = z * Math.cos(theta);
    const ggLat = z * Math.sin(theta);
    return { lng: ggLng, lat: ggLat };
  }
  // 火星坐标系(GCJ-02)与WGS-84互转（简化版）
  function gcj02ToWGS84(gcj_lon, gcj_lat) {
    // 中国区域内GCJ-02到WGS-84的偏移参数（简化模型）
    var dLon = 0.0065;
    var dLat = 0.006;
    var radLat = (gcj_lat / 180) * Math.PI;
    var magic = Math.sin(radLat);
    magic = 1 - 0.0025 * Math.cos(2 * radLat);
    var sqrtMagic = Math.sqrt(magic);

    var wgs_lon =
      gcj_lon -
      (dLon * 180) / ((Math.PI * 6378137 * Math.cos(radLat)) / sqrtMagic);
    var wgs_lat = gcj_lat - (dLat * 180) / ((Math.PI * 6378137) / sqrtMagic);

    return { lng: wgs_lon, lat: wgs_lat };
  }
</script>

</html>